<template>
  <div class="flex flex-col">
    <!-- <div class="mb-2 flex justify-end">
        <a-button type="primary" class @click="add">{{ $t('user.verification-code.required11156611020') }}</a-button>
      </div> -->
    <a-card class="flex-1 rounded overflow-x-auto" :body-style="{ padding: '12px 16px', height: '100%' }" :bordered="false">
      <div class="mb-2 flex justify-end">
        <a-button type="primary"  icon="plus" class @click="add">{{ $t('user.verification-code.required11156611020') }}</a-button>
      </div>
      <a-table ref="table" size="middle" class="h-full" :dataSource="list" :pagination="pagination" @change="tableChange"
        :loading="listLoading" :rowKey="(record, index) => { return index }">
        <!-- <a-table-column key="Id" data-index="Id" width="150" >
                      <span slot="title" >{{ $t( 'user.verification-code.required11156611016') }}</span>
                  </a-table-column> -->
        <a-table-column key="YtAdminFunctionStr" :title=" $t('user.v158')">
            <template slot-scope="text, record">
                    <span>{{ isLang?record.YtAdminFunctionStr:record.YtAdminFunctionEnStr }}</span>
              </template>
          </a-table-column>
        <!-- <a-table-column key="YtAdminFunctionStr" data-index="YtAdminFunctionStr" width="150">
          <span slot="title">{{ $t('user.verification-code.required11156611012') }}</span>
        </a-table-column> -->
        <a-table-column key="YtAuthorityName" :title=" $t('user.verification-code.required11156611017')">
            <template slot-scope="text, record">
                    <span>{{ isLang?record.YtAuthorityName:record.YtAuthorityNameEn }}</span>
              </template>
          </a-table-column>
        <!-- <a-table-column key="YtAuthorityName" data-index="YtAuthorityName" width="150">
          <span slot="title">{{ $t('user.verification-code.required11156611017') }}</span>
        </a-table-column> -->
        <a-table-column key="YtAuthorityCreatetime" data-index="YtAuthorityCreatetime" width="150">
          <span slot="title">{{ $t('user.verification-code.required11156611011') }}</span>
        </a-table-column>
        <a-table-column key="YtAuthorityState" data-index="YtAuthorityState" width="150">
          <span slot="title">{{ $t('user.verification-code.required11156611018') }}</span>
          <template slot-scope="text,record">
            <a-switch default-checked :checked="text == 1" @change="changeStatus(record.Id)" :loading="record.Id == Id" />
          </template>
          <!-- 'user.verification-code.required111566110577170' -->
        </a-table-column>
        <a-table-column key="action" :title="$t('app.setting.othersettings')">
          <template slot-scope="text, record">
            <span>
              <a-button type="link" block @click="edit(record)">{{ $t('user.verification-code.required11156611014')
              }}</a-button>
              <a-popconfirm :title="$t('user.verification-code.required111566110577225')"
                :ok-text="$t('user.v15')" :cancel-text="$t('user.email.required11')"
                @confirm="() => del(record.Id)">
                <a-button type="link" block>{{ $t('menu.exception.trigger') }}</a-button>
              </a-popconfirm>
            </span>
          </template>
        </a-table-column>

      </a-table>
    </a-card>
    <SaveJur ref="save" @succeed="init"></SaveJur>
  </div>
</template>
  
<script>
import { authorityList, authorityDelete, authorityUpdateState } from '@/api/index'
import SaveJur from './components/save.vue'
const columns = [
  {
    title: '权限ID',
    className: 'min-w-90p',
    dataIndex: 'Id',
    align: 'center',
    scopedSlots: { customRender: 'Id' },
  },
  {
    title: '功能名称',
    className: 'min-w-120p',
    dataIndex: 'YtAdminFunctionStr',
    align: 'center',
    scopedSlots: { customRender: 'YtAdminFunctionStr' },
  },
  {
    title: '权限名',
    className: 'min-w-120p',
    dataIndex: 'YtAuthorityName',
    align: 'center',
    scopedSlots: { customRender: 'YtAuthorityName' },
  },

  {
    title: '创建时间',
    className: 'min-w-120p',
    dataIndex: 'YtAuthorityCreatetime',
    align: 'center',
    scopedSlots: { customRender: 'YtAuthorityCreatetime' },
  },
  {
    title: '权限状态',
    className: 'min-w-120p',
    dataIndex: 'YtAuthorityState',
    align: 'center',
    scopedSlots: { customRender: 'YtAuthorityState' },
  },
  {
    title: '操作',
    dataIndex: 'action',
    align: 'center',
    width: '150px',
    scopedSlots: { customRender: 'action' },
  },
]

export default {
  components: { SaveJur },
  data() {
    return {
      columns,
      isLang:true,
      /**分页 */
      pagination: {
        current: 1, //当前页
        pageSize: 10, //每页条数
        total: 0, //总条数
        showQuickJumper: true,
        hideOnSinglePage: true,
        showTotal: (total) => this.$t('', { total }, 'user.verification-code.required111566110577217'),
      },
      /**table数据 */
      list: [],

      //表格Loading
      listLoading: false,
      //抽屉提交按钮loading
      loading: false,
      Id: 0,
    }
  },
  mounted(){
    let that=this;
    window.addEventListener('setItemEvent', function(e) {
      if(e.key=='lang'){
        let lang= JSON.parse(e.value)
        console.log(lang);
        if(lang == 'zh-EN'){
          that.isLang=false;
          console.log('this.isLang',this.isLang);
        }else{
          that.isLang=true
          console.log('this.isLang',this.isLang);
        
        }
      }
    })
  },
  methods: {
    init() {
      this.pagination.current = 1
      this.getList()
    },
    //分页
    tableChange(pagination) {
      this.pagination = pagination
      this.getList()
    },
    /**
     * 获取列表
     */
    async getList() {
      this.listLoading = true
      const { current, pageSize } = this.pagination
      try {
        const { data } = await authorityList({
          ...{ page: current, pageSize },
          ...this.searchForm,
        })
        const { Page, PageSize, Total, Lists } = data
        this.list = Lists || []
        this.pagination = {
          current: Page,
          pageSize: PageSize,
          total: Total,
        }
      } catch (error) {
        this.$message.error(error)
      } finally {
        this.listLoading = false
      }
    },
    add() {
      this.$refs.save.open(0)
    },
    edit(record) {
      this.$refs.save.open(1, record)
    },
    /**
     * 切换状态
     * @param {*} functionId
     */
    async changeStatus(Id) {
      try {
        this.Id = Id
        await authorityUpdateState({
          Id,
        })
        this.$message.success(this.$t('user.verification-code.required111566110577254'))
        this.getList()
      } catch (error) {
        this.$message.error(error)
      } finally {
        this.Id = 0
      }
    },
    /**
     * 删除
     * @param {*} functionId
     */
    async del(Id) {
      try {
        await authorityDelete({
          Id,
        })
        this.$message.success(this.$t('user.verification-code.required111566110577133'))
        this.getList()
      } catch (error) {
        this.$message.error(error)
      } finally {
      }
    },
  },
  created() {
    this.getList()
  },
}
</script>
<style lang="less" scoped>
/deep/.ant-table-row-cell-last {
  text-align: center !important;
}
</style>
  